<!--
* @author: YX
* @description: 登录模板
* @createTime: 2023-11-10 15:28:59
 -->
<template>
	<view class="content">
		<view class="text_body">
			<text class="text1">云千装</text>
			<text class="text4">装修一站式管理平台</text>
		</view>
		<view class="from"
			style="border: 1px solid #d2e1ef;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);border-radius: 2%;padding-bottom: 60px;padding-top: 40px;margin-top: -220px;">
			<view class="_input">
				<input type="text" v-model="loginName" placeholder="请输入您的账号/手机号" placeholder-class="_pl" />
			</view>
			<view class="_input">
				<input type="password" v-model="loginPassword" placeholder="请输入您的登录密码" placeholder-class="_pl" />
			</view>
			<view class="_input" style="width: 58%;float: left;">
				<input type="number" placeholder="验证码" v-model="randomCode" />

			</view>
			<view style="width: 40%;float: left;">
				<input type="number" placeholder="验证码" v-model="codeKey" :style="{display:'none'}" />
				<image :src="codeImg" @click="createImageCode"
					style="width: 95%;height: 80rpx;float:left;border: 1px solid #d2e1ef;margin-top: 16px;margin-left: 10px;" />
			</view>

			<button class="login" @click="login">登录</button>
			<view v-if="errorFlag" class="uni-title"
				style="text-align: center;font-size:12px;color:red;margin-top:10px;">{{errorMsg}}错误</view>
		</view>
		<!-- <view class="_check">
			<checkbox-group @change="checkbox">
				<label>
					<checkbox value="t" color="#128df7" style="transform:scale(0.7)" />
					<text>我已阅读并同意<text style="color:#128df7;">《用户协议》</text>和<text
							style="color:#128df7;">《隐私政策》</text></text>
				</label>
			</checkbox-group>
		</view> -->

		<view class="from" v-if="showCpFlag"
			style="border: 1px solid #d2e1ef;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);border-radius: 2%;padding-bottom: 40px;margin-top: 20px;;">
			<view class="uni-title uni-common-mt uni-common-pl">请选择所在公司</view>
			<view class="uni-list" style="position:unset">
				<radio-group @change="chooseCpLogin">
					<label class="uni-list-cell uni-list-cell-pd" style="position:unset" v-for="(item, index) in cpList"
						:key="item.cpId">
						<view style="width: 12%;">
							<radio :value="item.cpId" :checked="index === current" />
						</view>
						<view style="text-align: left;width: 88%;">{{item.cpName}}</view>
					</label>
				</radio-group>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				//验证码（流）
				codeImg: '',
				//登录名
				loginName: '',
				//登录密码
				loginPassword: '',
				//验证码key
				codeKey: '',
				//验证码（页面输入）
				randomCode: '',
				//是否显示公司列表标志
				showCpFlag: false,
				//公司列表
				cpList: [],
				//是否显示错误标志
				errorFlag: false,
				//错误内容
				errorMsg: ''
			}
		},
		methods: {
			login() {
				uni.login({
					provider: 'weixin',
					success: async (res) => {
						console.log('login success:', res);
						uni.request({
							url: 'http://127.0.0.1:9005/wxMini/getInfoByCode?code='+res.code,
							method: 'GET',
							success(res) {
								console.log("userInfo:"+JSON.stringify(res));
								// if (res.data.code !== 0) {
								// 	console.log('获取openid失败：', res.data.errMsg);
								// 	return
								// }
								// uni.setStorageSync('openid', res.data.openid)
							},
							fail(err) {
								console.log('获取openid失败：', err);
							}
						})
					},
					fail: (err) => {},
					complete: () => {
					}

				});
			},
			login2() {
				if (this.$shopxPub.isEmpty(this.loginName)) {
					this.pageErrorHandle('请填写登录名');
					return;
				}
				if (this.$shopxPub.isEmpty(this.loginPassword)) {
					this.pageErrorHandle('请填写密码');
					this.createImageCode();
					return;
				}
				let user = {
					loginName: this.loginName,
					password: this.loginPassword,
					codeKey: this.codeKey,
					randomCode: this.randomCode,
				}
				//查询公司列表
				uni.request({
					url: this.$serverPath + '/sysUser/selectUserCpList',
					dataType: "json",
					data: user,
					method: "post",
					success: (res) => {
						if (res.data.statusCode != "00000") {
							this.pageErrorHandle(res.data.statusDesc);
							return;
						}
						if (res.data.rspData.length > 1) {
							//存在多个公司
							this.showCpFlag = true;
							this.cpList = [];
							for (var i = 0; i < res.data.rspData.length; i++) {
								this.cpList.push(res.data.rspData[i]);
							}
						} else {
							//只有一个公司
							this.userLogin(res.data.rspData[0].cpId);
						}
					}
				});
			},
			chooseCpLogin(e) {
				//选中公司登录
				this.userLogin(e.detail.value);
			},
			async createImageCode() {
				//验证码
				try {
					//设置验证码key
					this.codeKey = this.$shopxPub.genRandomString(16);
					console.info("codeKey:" + this.codeKey);
					this.codeImg = this.$serverPath + '/sysUser/genRandomCode?codeKey=' + this.codeKey;
				} catch (error) {
					console.error("createImageCode.error:" + error);
				}
			},
			userLogin(cpId) {
				//选中公司登录
				console.info("cpId:" + cpId);
				let user = {
					loginName: this.loginName,
					password: this.loginPassword,
					codeKey: this.codeKey,
					randomCode: this.randomCode,
					cpId: cpId
				}
				uni.request({
					url: this.$serverPath + '/sysUser/officeLogin',
					dataType: "json",
					data: user,
					method: "post",
					success: (res) => {
						if (res.data.statusCode != "00000") {
							this.pageErrorHandle(res.data.statusDesc);
							return;
						}
						console.info(JSON.stringify(res));
						uni.clearStorageSync();
						uni.setStorage({
							key: 'USER_SESSION',
							data: res.data.rspData,
							success: function() {}
						});
						uni.setStorage({
							key: 'TOKENID_SESSION',
							data: res.data.rspData.tokenId,
							success: function() {}
						});

						// uni.getStorage({
						// 	key: 'USER_SESSION',
						// 	success: function (res) {
						// 		console.log("user:"+JSON.stringify(res.data));
						// 	}
						// });
						// uni.getStorage({
						// 	key: 'TOKENID_SESSION',
						// 	success: function (res) {
						// 		console.log("tokenId:"+JSON.stringify(res.data));
						// 	}
						// });

						// //记录缓存
						// uni.switchTab({
						// 	url: '../../mng/index/index'
						// });
					}
				});
			},
			pageErrorHandle(errorMsg) {
				this.errorFlag = true;
				this.errorMsg = errorMsg;
				this.createImageCode();
				return;
			}
		},
		mounted() {
			this.createImageCode();
		}
	}
</script>
<style lang="scss" scoped>
	button::after {
		border: none;
	}

	.content {
		width: 100%;

		.text_body {
			width: 100%;
			height: 400rpx;
			padding: 40rpx;
			padding-top: 120rpx;
			padding-bottom: 130rpx;
			background-image: url('../../../static/images/top_bg.png');
			// background-color: rgba(18, 141, 247, 1);

			text {
				font-size: 35rpx;
				font-weight: bold;
				display: block;
				color: #fff;
			}

			.text1 {}

			.text4 {
				margin-top: 10rpx;
			}
		}

		.from {
			width: 80%;
			margin: 0px auto;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-top: 20rpx;
			margin-top: -80rpx;
			background-color: #fff;
		}

		._b {
			width: 70%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0px auto;
			margin-top: 30rpx;
			margin-bottom: 50rpx;

			text {
				font-size: 30rpx;
				padding-bottom: 15rpx;
			}
		}

		._input {
			width: 100%;
			height: 80rpx;
			margin: 0px auto;
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			margin-top: 30rpx;
			border: 1px solid #dadbde;

			input {
				width: 75%;
				height: 80rpx;
				padding-left: 40rpx;
				// border:1px solid red;
			}

			._pl {
				font-size: 28rpx;
			}

			.sms {
				font-size: 28rpx;
				white-space: nowrap;
				color: rgba(18, 141, 247, 1);
				margin-right: 25rpx;
				background-color: transparent;
				border: none;
			}
		}

		.login {
			width: 100%;
			height: 85rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			margin: 0px auto;
			outline: none;
			background-color: rgba(18, 141, 247, 1);
			color: #fff;
			font-size: 30rpx;
			margin-top: 30rpx;
		}

		.passworld {
			display: block;
			margin: 0px auto;
			text-align: center;
			margin-top: 40rpx;
			color: rgba(18, 141, 247, 1);
			text-decoration: underline;
		}

		._check {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 180rpx;

			text {
				font-size: 28rpx;
			}
		}

		._f {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			text {
				display: flex;
				align-items: center;
				display: inline;
				margin: 0;
				font-size: 28rpx;
			}
		}

		._user {
			font-size: 26rpx;
			display: flex;
			align-items: center;
		}
	}
</style>